/**
 * 
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
randomForm();

add();
function add() {
    $('#title').on("keydown", function (event) {
        var keyCode = event.keyCode || event.which;
        if (keyCode == "13") {
            event.preventDefault();
            console.log($(this).val());
            $('#todolist').append(`<li>
            <input type="checkbox" />
            <p>${$(this).val().trim()}</p>
            <a href="javascript:;">-</a>
            </li>`);
            $(this).val("");
            randomForm();
            doneWork();
        }
    });
}


function randomForm() {
    let todoNum = $('#todolist').children().length;
    $('#todocount').html(todoNum);
    let overNum = $('#donelist').children().length;
    $('#donecount').html(overNum);
}

doneWork();
function doneWork() {
    $('#todolist input[type="checkbox"]').on("click", function (e) {
        let appendHtml = `<li>${$(e.target).parent().html()}</li>`;
        $(this).parent().remove();
        let dom = parseToDOM(appendHtml);
        dom[0].children[0].checked = true;
        $('#donelist').append($(dom));
        randomForm();
        del2();
        del();
    })
}

update();
function update() {
    $('#todolist p').on('click', function (e) {
        console.log($(e.target).text());
        $(this).parent().append(`<textarea id="insert_input" rows="1">` + $(e.target).text() + `</textarea>`)
        $(this).remove();
        $('#insert_input').on("keydown", function (event) {
            var keyCode = event.keyCode || event.which;
            if (keyCode == "13") {
                event.preventDefault();
                $(this).parent().append(`<p>${$('#insert_input').val()}</p>`)
                $(this).remove();
                update();
            }
        });
    })
}

del();
function del() {
    $('#todolist a').on('click', function (e) {
        console.log($(e.target).parent().remove());
        randomForm();
    })
}

del2();
function del2(){
    $('#donelist a').on('click', function (e) {
        console.log($(e.target).parent().remove());
        randomForm();
    })
}


update2();
function update2() {
    $('#donelist p').on('click', function (e) {
        console.log($(e.target).text());
        $(this).parent().append(`<textarea id="insert_input" rows="1">` + $(e.target).text() + `</textarea>`)
        $(this).remove();
        $('#insert_input').on("keydown", function (event) {
            var keyCode = event.keyCode || event.which;
            if (keyCode == "13") {
                event.preventDefault();
                $(this).parent().append(`<p>${$('#insert_input').val()}</p>`)
                $(this).remove();
                update2();
            }
        });
    })
}


function parseToDOM(str) {
    var div = document.createElement("div");
    if (typeof str == "string")
        div.innerHTML = str;
    return div.childNodes;
}


reverseWork();
function reverseWork() {
    $('#donelist input[type="checkbox"]').on("click", function (e) {
        let appendHtml = `<li>${$(e.target).parent().html()}</li>`;
        $(this).parent().remove();
        let dom = parseToDOM(appendHtml);
        dom[0].children[0].checked = false;
        $('#todolist').append($(dom));
        randomForm();
        del2();
        del();
    })
}



$(function () {
        $.ajax({
            type: "get",
            url: "https://www.fastmock.site/mock/5199a9d4f7bb99d4ffb8eb29bef98c7a/_data/api/text",
            success: function (res) {
                console.log(res);
                $("#ipv4").html(res.data.beginip);
                $("#addr").html(res.data.country + "&emsp;"+ res.data.area);
            },
            error: function (err) {
                console.log(err);
            }
        })
    });
